﻿<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../css/comm.css" />
    <link rel="stylesheet" type="text/css" href="../css/iconfont.css?v=1111" />
    <style>
        body {
            background-color: #f0f0f0;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }

        [v-cloak] {
            display: none;
        }

        .aui-grid {
            margin: 0 auto;
            margin: 10px 4% 0 4%;
            width: 92%;
            border-radius: 5px;
            box-shadow: 0 0 4px rgba(0, 0, 0, .1);
        }

        .aui-grid i.iconfont {
            font-size: 22px;
            color: #fff;
            padding: 10px;
            border-radius: 3px;
        }

        .aui-grid i.iconfont.iconshenqing {
            background: #33c9e4;
        }

        .aui-grid i.iconfont.iconapplication {
            background: #fda42b;
        }

        .aui-grid i.iconfont.iconAnkerwebicon- {
            background: #71d074;
        }

        .aui-grid i.iconfont.iconpandian {
            background: #6aabfe;
        }

        .aui-grid i.iconfont.iconweixiu2 {
            background: #33c9e4;
        }

        .aui-grid i.iconfont.iconchuzhi {
            background: #f0797b;
        }

        .aui-grid i.iconfont.iconlingyong {
            background: #74b3ff;
        }

        .aui-grid i.iconfont.iconjieyong {
            background: #3cc59b;
        }

        .aui-grid .aui-grid-label {
            margin-top: 10px;
            font-size: 0.66rem;
        }

        .aui-grid [class*=aui-col-] {
            display: block;
            padding: 0.6rem 0 0.8rem 0;
        }

        .aui-grid [class*=aui-col-] label {
            font-size: 0.75rem;
        }

        .aui-grid-title {
            font-size: 0.7rem;
            padding: 9px 12px;
            border-bottom: solid 1px #e1e1e1;
            margin-bottom: 8px;
        }

        .small-icon {
            font-family: "iconfont" !important;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            width: 10px;
            height: 9px;
            font-size: 0.6rem;
            padding: 3px 3px 2px 3px;
            background: #44c3a3;
            border-radius: 2px;
            margin-right: 5px;
            color: #fff;
        }

        .situation:before {
            content: "\e6e9";
        }

        .manegement:before {
            content: "\e6e9";
        }

        .grid-with-100 {
            font-size: 1rem !important;
            line-height: 1.2rem;
            width: 100%;
            text-align: center;
            padding: 5px;
        }

        .aui-grid.more-less-grid i.iconfont {
            font-size: 0.7rem;
            color: #888888;
            padding: 0;
        }

        .aui-grid.more-less-grid i.iconcujiantou1 {
            color: #ff0000;
        }

        .aui-grid.more-less-grid i.iconcujiantou {
            color: #207e04;
        }

        .aui-chart {
            background: #fff;
            margin: 0 4%;
        }

        .aui-grid-50 {
            width: 50%;
            float: left;
            padding-top: 10px;
        }
        .aui-grid-100 {
            padding-top: 0px;
            text-align: center; 
        }
    </style>
</head>

<body>
    <div id="app">
        <section id="main_refresh" class="aui-refresh-content">
            <div class="aui-content">
                <div class="aui-chart">
                    <div class="aui-grid-title ">
                        <i class="small-icon manegement"></i> 资产统计
                    </div>
                    <canvas id="myChart" height="200" style="width:100%;"></canvas>
                </div>
                <section class="aui-grid more-less-grid">
                    <div class="aui-grid-title ">
                        <i class="small-icon iconyingyongguanli"></i> 资产状况
                    </div>
                    <div class="aui-row">
                        <div class="aui-col-100" v-on:click="open_zc(0)">
                            <div class="aui-grid-label">总资产</div>
                            <label class="green">{{countform.totalcount}}</label>
                        </div>
                        <div class="aui-col-xs-4">
                            <div class="aui-grid-label">本年新增</div>
                            <div class="aui-grid-100"><span class="green">{{countform.yearaddcount}}</span>
                                <i class="icon iconfont iconcujiantou1"></i>
                            </div>
                        </div>
                        <div class="aui-col-xs-4">
                            <div class="aui-grid-label">本月新增</div>
                            <div class="aui-grid-100"><span class="green">{{countform.monthaddcount}}</span>
                                <i class="icon iconfont iconcujiantou1"></i>
                            </div>
                        </div>
                        <div class="aui-col-xs-4" v-on:click="open_zc(20)">
                            <div class="aui-grid-label">使用中</div>
                            <label class="green">{{countform.usecount}}</label>
                        </div>
                        <div class="aui-col-xs-4">
                            <div class="aui-grid-label">本年减少</div>
                            <div class="aui-grid-100"><span class="green">{{countform.yearreducecount}}</span>
                                <i class="icon iconfont iconcujiantou"></i>
                            </div>
                        </div>
                        <div class="aui-col-xs-4">
                            <div class="aui-grid-label">本月减少</div>
                            <div class="aui-grid-100"><span class="green">{{countform.monthreducecount}}</span>
                                <i class="icon iconfont iconcujiantou"></i>
                            </div>
                        </div>
                        <div class="aui-col-xs-4" v-on:click="open_zc(10)">
                            <div class="aui-grid-label">闲置中</div>
                            <label class="green">{{countform.freecount}}</label>
                        </div>
                    </div>
                </section>
                <section class="aui-grid aui-margin-b-15">
                    <div class="aui-grid-title">
                        <i class="small-icon manegement"></i> 资产管理
                    </div>
                    <div class="aui-row">
                        <div class="aui-col-xs-3" v-for="item in list" v-on:click="openWin(item)">
                            <i class="icon iconfont" v-bind:class="item.css"></i>
                            <div class="aui-grid-label ">{{item.name}}</div>
                        </div>
                    </div>
                </section>
            </div>
        </section>
    </div>
</body>

<script type="text/javascript" src="../script/api.js "></script>
<script type="text/javascript" src="../script/aui-toast.js"></script>
<script type="text/javascript" src="../script/aui-pull-refresh.js"></script>
<script type="text/javascript" src="../script/aui-scroll.js"></script>
<script type="text/javascript" src="../script/vue.js "></script>
<script type="text/javascript" src="../script/config.js "></script>
<script type="text/javascript" src="../script/common.js "></script>
<script src="https://gw.alipayobjects.com/os/lib/antv/f2/3.7.3/dist/f2-all.min.js"></script>
<script type="text/javascript" src="js/homezichan.js "></script>

</html>
